<template>
  <div class="mo-userinfo-sc" @dblclick="ttt">
    <div v-if="loading">
      <Loading></Loading>
    </div>
    <div v-if="!loading">
      <div class="userinfo-sc-item" v-for="(v, i) in selItems" :key="i">
        <span @click="goRead(v.loveArt.id)">{{i+1}}.{{v.loveArt.ititle}}</span>
        <Icon type="md-more" class="item-ctl" size="20" @click="detail(i)" />
        <div class="item-ctl-box" :id="'box'+i">
          <div class="item-ctl-box-son">详情</div>
          <div class="item-ctl-box-son" @click="deleteLove(v.articleId)">删除</div>
        </div>
      </div>
      <Page :total="items.length" show-elevator :page-size="20" @on-change="selectPage" />
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { Page } from "view-design";
import Loading from "../../anime/axiosLoading/axiosLoading3";
export default {
  name: "moUserinfoSc",
  data() {
    return {
      items: [],
      selItems: [],
      loading: true
    };
  },
  created() {
    this.getLove();
  },
  methods: {
    //获取收藏
    getLove: function() {
      this.$axios
        .get(this.$store.getters.url + "/getMyAllArticle", {
          params: {
            userId: localStorage.getItem("loginfo2")
          }
        })
        .then(res => {
          this.items = res.data.data;
          this.selItems = res.data.data.slice(0, 20);
          this.loading = false;
        });
    },
    //前往阅读
    goRead: function(e) {
      // let key = "1314";
      // let mid = encrypt.Encrypt(e.toString(), key);
      this.$axios
        .get(this.$store.getters.url + "/artisee?id=" + e)
        .then(res => {
          console.log(res.data);
        });
      this.$router.push("/read?artid=" + e);
    },
    //选择页码
    selectPage: function(e) {
      this.selItems = this.items.slice(20 * (e - 1), 20 * e);
    },
    detail: function(e) {
      $(".item-ctl-box").css({ opacity: "0", transform: "scale(0)" });
      $("#box" + e).css({ opacity: "1", transform: "scale(1)" });
    },
    ttt: function(e) {
      $(".item-ctl-box").css({ opacity: "0", transform: "scale(0)" });
    },
    deleteLove: function(e) {
      this.ttt();
      this.$axios
        .get(this.$store.getters.url + "/deleteLove", {
          params: {
            userId: localStorage.getItem("loginfo2"),
            articleId: e
          }
        })
        .then(res => {
          this.getLove();
          this.$Message.success(res.data.msg);
        });
    }
  },
  components: { Page, Loading }
};
</script>

<style lang="scss" scoped>
.mo-userinfo-sc {
  width: 100%;
  margin-top: 25px;
  // transition: all 0.4s;
  height: 570px;
  overflow: auto;
  padding-top: 5px;
  &::-webkit-scrollbar {
    background-color: white;
    width: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: black;
  }
  .userinfo-sc-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 10px;
    // transition: all 0.4s ease-in-out;
    // border:  1px solid black;
    font-size: 14px;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    height: 31px;
    &:hover {
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    span {
      cursor: pointer;
      &:hover {
        color: pink;
      }
    }
    .item-ctl {
      cursor: pointer;
    }
    .item-ctl-box {
      position: absolute;
      right: 25px;
      bottom: -20px;
      width: 60px;
      background-color: white;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
      opacity: 0;
      transform: scale(0);
      transition: all 0.4s;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      z-index: 900;
      .item-ctl-box-son {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 12px;
        height: 20px;
        &:nth-of-type(1) {
          border-bottom: 1px solid #eee;
        }
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}
</style>